<template>
    <div class="main-template" v-bind:dataValue="showLoading">
        <yd-navbar slot="navbar" title="信息交流" class="public-header">
            <span slot="left">
                <a href="javascript:window.history.go(-1)"><yd-navbar-back-icon></yd-navbar-back-icon></a>
            </span>
        </yd-navbar>
        <div class="public-main-wrap">
            <yd-cell-group title="信息留言" class="invest-list">
                <yd-cell-item>
                    <yd-textarea slot="right" placeholder="请输入您的留言" maxlength="100" required v-model="postData.textarea" ref="textarea"></yd-textarea>
                </yd-cell-item>
            </yd-cell-group>
            <yd-button-group>
                <yd-button size="large" @click.native="sendMessage">发送留言</yd-button>
            </yd-button-group>
            <yd-infinitescroll :on-infinite="loadList" ref="infinitescrollDemo">
                <div class="message-group" slot="list">
                    <yd-flexbox direction="vertical">
                        <yd-flexbox-item>留言及回复</yd-flexbox-item>
                        <yd-flexbox-item v-for="item in messList">
                            <div>{{item.time}}</div>
                            <p>{{item.type_name}}：{{item.content}}</p>
                        </yd-flexbox-item>
                    </yd-flexbox>
                </div>
                <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>
                <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />
            </yd-infinitescroll>
        </div>
        <yd-tabbar slot="tabbar" class="public-footer">
            <yd-tabbar-item title="首页" link="/">
                <yd-icon name="home" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="投资收益" link="/income">
                <yd-icon name="shopcart-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="信息交流" link="/message" active>
                <yd-icon name="like-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="个人中心" link="/user">
                <yd-icon name="ucenter-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
        </yd-tabbar>
    </div>
</template>
<script>
    import Ajax from "../api/ajax.js";
    import dataURL from "../data/dataURL.js";
    export default {
        data() {
            return {
                postData: {
                    textarea: "",
                },
                page: 1,
                per_page: 10,
                loadBloean:true,
                messList: [
                    // {
                    //     "msg_id": '',
                    //     "type": "", //类型
                    //     "user_id": '',
                    //     "aite_user_id": '',
                    //     "title": "",// 标题
                    //     "content": "",// 内容
                    //     "created_at": "",// 发送时间
                    //     "updated_at": "",
                    //     "type_name": "",
                    //     "time":"",
                    // }
                ]
            }
        },
        methods: {
            async sendMessage() {
                if (!this.postData.textarea) {
                    this.$dialog.toast({
                        mes: '请输入您的留言',
                        timeout: 500,
                        icon: 'error'
                    });
                    return;
                }
                try {
                    let res = await Ajax.Post(dataURL.message.saveMessage, {
                        content: this.postData.textarea
                    });
                    console.log(res);
                    this.$dialog.toast({
                        mes: '留言成功',
                        timeout: 500,
                        icon: 'success'
                    });
                    setTimeout(() => {
                        window.location.reload();
                    }, 500);
                } catch (error) {
                    console.log("error")
                }

            },
            async getData() {
                try {
                    let res = await Ajax.Post(dataURL.message.list, {
                        page: this.page,
                        per_page: this.per_page,
                    });
                    this.messList = res.data;
                    this.page++;
                } catch (error) {
                    console.log("error")
                }
                this.loadBloean = false;
            },
            async loadList() {
                let res = await Ajax.Post(dataURL.message.list, {
                    page: this.page,
                    per_page: this.per_page
                });
                let _list = res.data;
                console.log(res)
                this.messList = [...this.messList, ..._list];
                console.log(this.messList)
                if (_list.length < this.per_page) {
                    /* 所有数据加载完毕 */
                    console.info("所有数据加载完毕")
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                    return;
                }
                /* 单次请求数据完毕 */
                this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
                this.page++;
            },
        },
        computed: {
            showLoading() {
                if (this.loadBloean) {
                    this.$dialog.loading.open('很快加载好了');
                } else {
                    this.$dialog.loading.close();
                }
            }
        },
        mounted() {
            this.getData();
        }
    }

</script>